@import "define";
@import "head";
@import "media";

html, body {
  height: 100%;
}

body {
  overflow-y: auto;
}

#admin{
  min-height: 300px;
}

#index,#article {
  background: #f5f5f5;
  small{
    display: block;
    float: right;
    margin-left:1rem;
    height:3rem;
    line-height: 3rem;
  }
  .tags {
    ul {
      display: inline;
    }
    li {
      display: inline;
      margin: 2px;
      font-size: 0.8rem;
      padding: 0.2rem;
      background: #E1ECF4;
      color: #39739d;
      vertical-align: middle;
    }
    li:after {
      content: " ×";
      font-size: 1.5rem;
      vertical-align: middle;
    }
    li:hover{
      background-color: #cee0ed;
    }
    li:hover:after{
      text-shadow: 0 0 1px #39739d;
    }
  }
  main {
    background: #f5f5f5;
    padding: 2rem;
  }
  h2 {
    margin: 0 0 1rem 0;
  }
  article {
    section {
      border-bottom: 1px solid gray;
      padding: 1rem 0;
    }
    img {
      max-width: 95%;
      display: block;
      margin: 0 auto;
    }
  }

  aside {
    background: #f5f5f5;
    padding:0 1rem;
    .tag {
      h3 {
        color: #400;
        margin: 1rem 0;
        padding-bottom: 2px;
        border-bottom: 3px solid #999;
      }
      ul {
        font-size: 0;
      }
      li {
        display: inline-block;
        line-height: 1.4rem;
        margin: 2px;
        a {
          font-size: 0.8rem;
          padding: 0.2rem;
          background: #E1ECF4;
          color: #39739d;
        }
        a:hover {
          background: #cee0ed;
        }
      }
    }
    .tag:first-child{
      margin-top:3rem;
    }
  }
}

